<template>
  <div>
    <div style="padding: 18px">
      <el-descriptions
        direction="vertical"
        class="margin-top"
        :column="3"
        border
      >
        <template #extra>
          <el-popconfirm title="确定要新增此客户吗?" @confirm="events.add">
            <template #reference>
              <el-button type="primary">新增</el-button>
            </template>
          </el-popconfirm>
        </template>
        <el-descriptions-item>
          <template #label> <div class="cell-item">客户名称</div> </template>
          <el-input
            v-model="data.request.name"
            style="width: 240px"
            placeholder="请输入..."
            clearable
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">客户电话</div>
          </template>
          <el-input
            v-model="data.request.phone"
            style="width: 240px"
            placeholder="请输入..."
            clearable
            :maxlength="11"
            @input="filterPhoneNumber"
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">微信</div>
          </template>
          <el-input
            v-model="data.request.wechat"
            style="width: 240px"
            placeholder="请输入..."
            clearable
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">QQ</div>
          </template>
          <el-input
            v-model="data.request.qq"
            style="width: 240px"
            placeholder="请输入..."
            clearable
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">类型</div>
          </template>
          <el-select
            v-model="data.request.type"
            placeholder="客户类别"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in data.type_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">来源</div>
          </template>
          <el-select
            v-model="data.request.source"
            placeholder="客户来源"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in data.source_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">地址</div>
          </template>
          <div style="display: flex; gap: 10px;">
            <el-select
              v-model="data.request.province"
              placeholder="请选择省份"
              style="width: 80px"
              @change="onProvinceChange"
            >
              <el-option
                v-for="(cities, province) in provinces"
                :key="province"
                :label="province"
                :value="province"
              />
            </el-select>
            <el-select
              v-model="data.request.city"
              placeholder="请选择城市"
              style="width: 80px"
              :disabled="!data.request.province"
              @change="onCityChange"
            >
              <el-option
                v-for="city in currentCities"
                :key="city"
                :label="city"
                :value="city"
              />
            </el-select>
            <el-select
              v-model="data.request.district"
              placeholder="请选择区县"
              style="width: 80px"
              :disabled="!data.request.city"
            >
              <el-option
                v-for="district in currentDistricts"
                :key="district"
                :label="district"
                :value="district"
              />
            </el-select>
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">学校</div>
          </template>
          <el-input
            v-model="data.request.school"
            style="width: 240px"
            placeholder="请输入..."
            clearable
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">下次联系时间</div>
          </template>
          <el-date-picker
            v-model="data.request.next_time"
            type="datetime"
            style="width: 240px"
            placeholder="请输入约定时间"
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">跟进时间</div>
          </template>
          <el-date-picker
            v-model="data.request.follow_time"
            type="datetime"
            style="width: 240px"
            placeholder="请输入约定时间"
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">负责人</div>
          </template>
          <el-select
            v-model="data.request.responsibility"
            placeholder="负责人"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in data.responsibility_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">备注</div>
          </template>
          <el-input
            v-model="data.request.remark"
            style="width: 240px"
            placeholder="请输入..."
            clearable
          />
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Customer_Add_Data } from "@/utils/type";
import { Add_Customer, Get_Level, Get_Origin, Get_Type, Get_user } from "@/api/customer";
import { onMounted, reactive, ref } from "vue";
import dayjs from "dayjs";
import { notice } from "@/utils/notice";
import cities from "@/components/CustomerVip/cities.json"; // 引入 cities.json

const data = reactive<Customer_Add_Data>({
  isFirst: true,
  source_list: [],
  level_list: [],
  type_list: [],
  responsibility_list: [],
  request: {
    name: "",
    phone: "",
    wechat: "",
    type: "",
    source: "",
    level: "",
    province: "",
    city: "",
    district: "",
    address: "",
    next_time: "",
    responsibility: "",
    school: "",
    qq: "",
    follow_time: "",
    record: "",
    remark: "",
    author: "",
  },
});

const provinces = ref(cities);
const currentCities = ref([]);
const currentDistricts = ref([]);

const events = {
  /**
   * 新增
   */
  async add() {
    // 验证必填字段
    const { name, phone, type, source, province, city, district } = data.request;
    if (!name || !phone || !type || !source || !province || !city || !district) {
      alert('请确保所有必填字段都已填写！');
      return;
    }
    data.request.address = `${province}/${city}/${district}`;
    const res = await Add_Customer({
      ...data.request,
      next_time: dayjs(data.request.next_time).format("YYYY-MM-DD"),
      follow_time: dayjs(data.request.follow_time).format("YYYY-MM-DD"),
    });
    notice(res);
    if (res.code >= 0) {
    }
  },
};

const methods = {
  async bind() {
    /**
     * 来源
     */
    const res = await Get_Origin({
      keys: ["customer_source"],
    });
    if (res.code === 0) {
      data.source_list = res.data.data;
    }


  },
  async bind2() {

    /**
     * 等级
     */
    const res2 = await Get_Level({
      keys: ["vip_level"],
    });
    if (res2.code === 0) {
      data.level_list = res2.data.data;
    }
  },

  async bind3() {
    const res3 = await Get_user({
      keys: ["user"],
    });
    if (res3.code === 0) {
      data.responsibility_list = res3.data.data;
    }
  },
  async bind4() {
    /**
     * 类型
     */
     const res1 = await Get_Type({
      keys: ["origin"],
    });
    if (res1.code === 0) {
      data.type_list = res1.data.data;
    }
  },
};

const onProvinceChange = (province: string) => {
  currentCities.value = Object.keys(cities[province] || {});
  data.request.city = "";
  data.request.district = "";
  currentDistricts.value = [];
};

const onCityChange = (city: string) => {
  currentDistricts.value = cities[data.request.province]?.[city] || [];
  data.request.district = "";
};

const filterPhoneNumber = (value: string) => {
  data.request.phone = value.replace(/\D/g, '');
};

onMounted(async () => {
  await methods.bind();
  await methods.bind2();
  await methods.bind3();
  await methods.bind4();
  data.isFirst = false;
});
</script>

<style scoped>
</style>
